<!-- 新增、编辑 -->

<template>
    <el-dialog :model-value="dialogFormVisible" :destroy-on-close="true" :title="dialogTitle" width="450px"
        @close="emits('closeDialog')">
        <el-form ref="dialogFormRef" :model="dialogForm" :label-width="formLabelWidth" :rules="rules">
            <el-form-item label="币种唯一名称" :label-width="formLabelWidth" prop="name">
                <el-input v-model="dialogForm.name" />
            </el-form-item>
            <el-form-item label="币种符号" :label-width="formLabelWidth" prop="symbol">
                <el-input v-model="dialogForm.symbol" />
            </el-form-item>
            <el-form-item label="币种别名(说明)" :label-width="formLabelWidth" prop="alias">
                <el-input v-model="dialogForm.alias" />
            </el-form-item>
            <el-form-item label="发卡渠道" :label-width="formLabelWidth" prop="issuer_channel">
                <el-input v-model="dialogForm.issuer_channel" />
            </el-form-item>
            <el-form-item label="币种图标" :label-width="formLabelWidth">
                <el-upload
                    :action="uploadimgUrl"
                    :data="{ project_code: 'pay_service' }"
                    :show-file-list="false"
                    :on-success="handleUploaderImgSuccess"
                    :limit="1"
                    :headers="TOKENT_HEADER"
                    class="avatar-uploader"
                    >
                    <img v-if="dialogForm.icon" :src="dialogForm.icon_show" class="avatar" />
                    <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                </el-upload>
            </el-form-item>
            <el-form-item label="是否启用" :label-width="formLabelWidth" prop="is_active">
                <el-select v-model="dialogForm.is_active" placeholder="是否启用">
                    <el-option label="否" :value="0" />
                    <el-option label="是" :value="1" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emits('cancel')">取消</el-button>
                <el-button type="primary" @click="submit(dialogForm)" :loading="btnLoading">提交</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { uploadimgUrl } from "@/api/system/uploadimg";
import { TOKENT_HEADER } from "@/config/api-constant/system";
const dialogFormRef = ref(null);

defineProps({
    dialogFormVisible: {
        type: Boolean,
        default: false
    },
    dialogForm: {
        type: Object,
        default: {
            id: "",
            name: "",
            symbol: "",
            alias: "",
            issuer_channel: "",
            icon: "",
            icon_show: "",
        }
    },
    btnLoading: {
        type: Boolean,
        default: false
    },
    dialogTitle: {
        type: String,
        default: ""
    }
});
const emits = defineEmits(["closeDialog", "cancel", "submitForm", "handleUploaderImgRequest"]);
const handleUploaderImgSuccess = (res) => {
    emits("handleUploaderImgRequest", res, "icon_show");
};
const formLabelWidth = "140px";
// 校验
const rules = {
    name: [{ required: true, message: "请输入币种唯一名称（如USD、CNY等）", trigger: "blur" }],
    symbol: [{ required: true, message: "请输入币种符号", trigger: "blur" }],
    issuer_channel: [{ required: true, message: "请输入发卡渠道", trigger: "blur" }],
};
// 提交
const submit = dialogForm => {
    dialogFormRef.value
        .validate()
        .then(async () => {
            if (!dialogForm.icon) {
                ElMessage({
                    message: "币种图片未上传",
                    type: "error",
                });
                return false;
            }
            try {
                emits("submitForm", dialogForm);
            } catch (error) {
                return false;
            }
        })
        .catch(error => {
            return false;
        });
};
</script>
  